<template>
  <div style="height: 100vh; border: 1px solid #eee;">
    <!-- 设置最外层容器高度为100vh，并加上一个很细的边框 -->
    <el-container style="height: 100%;">
      <el-header style="height: 60px; line-height: 60px; background-color: #409EFF; color: #fff; padding: 0 20px; display: flex; justify-content: space-between; align-items: center;">
        <span><i class="el-icon-house"></i> 熙心健康管理系统</span>
        <el-button type="danger" size="small" @click="logout">注销</el-button>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="230px" style="background-color: #333; color: #fff;">
          <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect" background-color="#333" text-color="#fff" active-text-color="#409EFF">
            <el-menu-item index="1">
              <i class="el-icon-house"></i>
              <router-link to="/first">首页</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-date"></i>
              <router-link to="/emp">体检预约</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-s-order"></i>
              <router-link to="/dept">预约列表</router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-search"></i>
              <router-link to="/find">体检客户查询</router-link>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main class="home" style="padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <h2 style="color: #fff;">欢迎使用熙心健康管理系统！</h2>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      tableData: [],
      searchForm: {
        name: '',
        gender: '',
        entrydate: []
      },
      activeIndex: '1' // 默认激活首页
    };
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
    },
    logout() {
      this.$message.success('注销成功！');
      this.$router.push('/login');
    },
    firstsbutton() {
      this.$router.push('/first');
    },
    goToBookCheckup() {
      this.$router.push('/book-checkup');
    },
    goToCheckReports() {
      this.$router.push('/check-reports');
    },
    goToCustomerQuery() {
      this.$router.push('/customer-query');
    },
    goToHome() {
      this.$router.push('/home');
    },
    goToScheduleCheckup() {
      this.$router.push('/schedule-checkup');
    }
  }
};
</script>

<style scoped>
.home {
  background-image: url('.\\background.jpg');
  padding: 20px;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.el-header {
  background-color: #409EFF;
  color: #fff;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-aside {
  background-color: #333;
  color: #fff;
}

.el-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: #fff;
}

.el-menu {
  border-right: none;
}

.el-menu-item a {
  text-decoration: none;
  color: #fff;
}

.el-menu-item a:hover {
  color: #409EFF;
}

.el-menu-item.is-active a {
  color: #409EFF;
  font-weight: bold;
}

.el-menu-item.is-active {
  background-color: #4a4a4a;
}

/* 主标题样式 */
h2 {
  font-size: 32px;
  margin: 0;
  color: #fff;
}

/* 表单输入框样式 */
.el-input__inner {
  border-radius: 5px;
}

/* 选择框样式 */
.el-select .el-input__inner {
  border-radius: 5px;
}

/* 日期选择器样式 */
.el-date-editor.el-input__inner {
  border-radius: 5px;
}

/* 按钮样式 */
.el-button {
  margin-top: 10px;
}

.el-button--primary {
  margin-right: 20px;
}

.el-button--default {
  margin-left: 20px;
}
</style>
